<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <!-- 
        1.如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用
        2. svg 图片 一般使用 el-icon标签包含，可以给svg 设置一些属性，
        3.

     -->
    <!-- Import Vue 3 -->
    <script src="https://cdn.staticfile.net/vue/3.2.24/vue.global.js"></script> <!-- Import style -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/element-plus/2.5.1/index.css">
    </link>
    <!-- Import component library -->
    <script src="https://cdn.staticfile.net/element-plus/2.5.1/index.full.js"></script>
    <script src="https://cdn.staticfile.net/element-plus-icons-vue/2.3.1/global.iife.js"></script>
    <style>
        .c1 {
            background-color: #79bbff;
        }

        .c2 {
            background-color: #c6e2ff;
        }
    </style>

<body>
    <div id="app">

        <el-icon><Minus /></el-icon>
        <hr>
        <el-icon color="#409efc" @click='myclick'>
            <Share />
        </el-icon>

        <hr>
        <div>
            <el-icon :size="20">
                <Edit />
            </el-icon>
            <el-icon color="#409efc" class="no-inherit">
                <Share />
            </el-icon>
            <el-icon>
                <Delete />
            </el-icon>
            <el-icon class="is-loading">
                <Loading />
            </el-icon>
            <el-button type="primary">
                <el-icon style="vertical-align: middle">
                    <Search />
                </el-icon>
                <span style="vertical-align: middle"> Search </span>
            </el-button>
        </div>
        <hr>

        <div style="font-size: 20px">
            <!-- 由于SVG图标默认不携带任何属性 -->
            <!-- 你需要直接提供它们 -->
            <Edit style="width: 1em; height: 1em; margin-right: 8px" />
            <Share style="width: 2em; height: 2em; margin-right: 118px" />
            <Delete style="width: 1em; height: 1em; margin-right: 218px" />
            <Search style="width: 1em; height: 1em; margin-right: 318px" />
        </div>
        <hr>
        <div>
            <el-icon :size="size" :color="color">
                <Edit />
            </el-icon>
            <!-- 或者独立使用它，不从父级获取属性 -->
            <Edit />
        </div>
    </div>
</body>
<script>

    let config = {
        data() {
            return {
                visible: false,
                size: 100,
                color: 'red'
            }
        },
        methods: {
            myclick() {
                alert("********");
            }
        }
    }
    let app = Vue.createApp(config);
    app.use(ElementPlus);
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }
    app.use(ElementPlusIconsVue);
    app.mount('#app');
</script>

</html>